<template>
	<view class="create-ok flex flex-col items-center justify-center mt-60">

		<view class="lianyi-container">
			<view class="box">
				<view style="--i:1"></view>
				<view style="--i:2"></view>
				<view style="--i:3"></view>
				<view style="--i:4"></view>
				<view style="--i:5"></view>
				<view style="--i:6"></view>
				<view style="--i:7"></view>
				<view style="--i:8"></view>
				<view style="--i:9"></view>
				<view style="--i:10"></view>
			</view>
			<image class="avatar" src="/static/logo.svg"></image>
		</view>

		<view class="progress">
			<view class="progress-ok"></view>
		</view>
		<view class="role-text">角色创建中请稍等...</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.create-ok {
		padding: 0 30rpx;
	}

	.lianyi-container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.lianyi-container .box {
		width: 600rpx;
		height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.lianyi-container .avatar{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.lianyi-container .box view {
		position: absolute;
		border-radius: 50%;
		box-sizing: border-box;
		background: linear-gradient(90deg, #7934FD 8%, #E75DFF 90%), #FFFFFF;
		animation: animate 4s linear infinite;
		animation-delay: calc(0.8s * var(--i));
	}

	@keyframes animate {
		0% {
			opacity: 0;
			width: 140rpx;
			height: 140rpx;
		}

		50% {
			opacity: 0.4;
		}

		100% {
			width: 600rpx;
			height: 600rpx;
			opacity: 0;
		}
	}

	.progress {
		margin-top: 60rpx;
		width: 100%;
		height: 30rpx;
		border-radius: 30rpx;
		background: linear-gradient(90deg, rgba(121, 52, 253, 0.2) 8%, rgba(231, 93, 255, 0.2) 90%), #FFFFFF;
		position: relative;
	}

	.progress-ok {
		transition: .4s;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		border-radius: 30rpx;
		width: 20%;
		background: linear-gradient(90deg, #7934FD 8%, #E75DFF 90%), #FFFFFF;
	}

	.role-text {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #333;
	}
</style>